<template>
  <div>
    <van-search v-model="value" placeholder="搜索歌曲, 歌手, 专辑" fixed />
    <div class="hot_search" v-if="isShow">
      <p class="hot_title">热门搜索</p>
      <ul class="hot_name_wrap">
        <li
          class="hot_item"
          v-for="(item, index) in list"
          :key="index"
          @click="btn(item)"
        >
          {{ item.first }}
        </li>
      </ul>
    </div>

    <div v-else>
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
      >
        <van-cell v-for="item in list2" :key="item.id">
          <div class="song_item_wrap">
            <div class="song_left">
              <p>{{ item.name }}</p>
              <p>
                <span>{{ item.ar[0].name }} - </span>
                <span>{{ item.al.name }}</span>
              </p>
            </div>
            <div class="song_right">
              <i class="iconfont icon-bofang"></i>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
function debounce(fn, timer) {
  return function () {
    clearTimeout(fn.timer);
    fn.timer = setTimeout(() => {
      fn.call([this, ...arguments]);
    }, timer);
  };
}
import { HotSearchAPI, SearchAPI } from "../Api";
export default {
  data() {
    return {
      list: [],
      list2: [],
      value: "", // 搜索关键字
      loading: false,
      finished: false,
      isShow: true,
      isClick: false,
    };
  },
  async created() {
    const res = await HotSearchAPI();
    // console.log(res);
    this.list = res.data.result.hots;
    this.fn2 = debounce(this.getFn, 1000);
  },
  methods: {
    btn(item) {
      this.isClick = true;
      this.value = item.first;
      this.getFn();
    },
    async getFn() {
      const res1 = await SearchAPI({
        keywords: this.value,
      });
      if (res1.data.result) {
        console.log(res1);
        this.list2 = res1.data.result.songs;
        this.isShow = false;
      } else {
        this.list2 = [];
        this.isShow = true;
      }
      this.isClick = false;
    },
  },
  watch: {
    value() {
      if (!this.isClick) {
        this.fn2();
      }
    },
  },
};
</script>

<style scoped>
/* 热门搜索 */
.hot_search {
  padding: 0.266667rem;
}
.hot_title {
  font-size: 0.32rem;
  color: #666;
}
.hot_name_wrap {
  margin: 0.266667rem 0;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

.van-cell {
  padding: 0.133333rem 0.266667rem;
  border-bottom: 1px solid #ccc;
}
/*歌单样式*/
.song_item_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 歌曲列表 */
.song_right {
  padding-right: 0.266667rem;
  line-height: 1.066667rem;
}

/* 歌曲_名字 */
.song_left {
  width: 8rem;
}
.song_left p:first-child {
  font-size: 0.453333rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song_left p:last-child {
  font-size: 0.32rem;
  color: #888;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 播放图标 */
.song_right i {
  display: inline-block;
  transform: scale(1.3);
}
</style>